<template>
  <div class="overTooltip" :style="{ width: width + 'px' }">
    <el-tooltip placement="top" :content="content" :disabled="isShowTooltip">
      <p class="ellipsis" @mouseover="onMouseover()">
        <span :ref="refName">{{content}}</span>
      </p>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: "overTooltip",
  props: {
    width: {
      type: Number,
      required: true
    },
    content: {
      type: String,
      required: true
    },
    refName: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isShowTooltip: true
    }
  },
  methods: {
    onMouseover() {
      const nodeWidth = this.$refs[this.refName].offsetWidth
      const parentNodeWidth = this.$refs[this.refName].parentNode.offsetWidth
      this.isShowTooltip = parentNodeWidth > nodeWidth
    }
  }
}
</script>

<style lang="less" scoped>
  .overTooltip {
    width: 200px;
  }
</style>